import { useEffect, useState } from 'react'
import styles from './index.module.less'
import { ArrowLeft } from '@react-vant/icons'
import axios from '@/api'
import { useSearchParams,useNavigate } from 'react-router'

export default function NoteDetail() {
    const [searchParams]=useSearchParams()
    const id=searchParams.get('id')
    const navigate=useNavigate()
    const [noteData,setNoteData]=useState({})
    useEffect(()=>{
        axios.get(`/findNoteDetailById?id=${id}`).then(res=>{
            setNoteData(res.data)
        })
    },[])
    return (
        <div className={styles['note-datail']}>
            <div className={styles['back']} onClick={() => { navigate(-1) }}>
                <ArrowLeft fontSize={18}/>
            </div>
            <div className={styles['note-img']}>
                <img src={noteData.note_img} alt="" />
            </div>
            <div className={styles['note-content']}>
                <div className={styles['tab']}>
                    <span className={styles['note_type']}>{noteData.note_type}</span>
                    <span className={styles['author']}>{noteData.user_name}</span>
                </div>
                <p className={styles['title']}>{noteData.note_title}</p>
                <div className={styles['content']}>{noteData.note_content}</div>
            </div>
        </div>
    )
}
